<!DOCTYPE html>





<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8">
<meta name="generator" content="Hexo 3.9.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=7.3.0">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=7.3.0">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=7.3.0">
  <link rel="mask-icon" href="/images/apple-touch-icon-next.png?v=7.3.0" color="#222">

<link rel="stylesheet" href="/css/main.css?v=7.3.0">


<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css">


<script id="hexo-configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '7.3.0',
    exturl: false,
    sidebar: {"position":"left","display":"post","offset":12,"onmobile":false},
    back2top: {"enable":true,"sidebar":true,"scrollpercent":true},
    save_scroll: false,
    copycode: {"enable":true,"show_result":true,"style":null},
    fancybox: false,
    mediumzoom: false,
    lazyload: false,
    pangu: false,
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    },
    localsearch: {"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},
    path: 'search.xml',
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    translation: {
      copy_button: 'Copy',
      copy_success: 'Copied',
      copy_failure: 'Copy failed'
    }
  };
</script>

  <meta name="description" content="前端面试题（答案）最近在招人,收集一些面试题">
<meta name="keywords" content="Hexo,HTML,CSS,android,Linux">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试题（答案）">
<meta property="og:url" content="https://dctxf.com/interview-questions.html">
<meta property="og:site_name" content="门口摔倒的老大爷">
<meta property="og:description" content="前端面试题（答案）最近在招人,收集一些面试题">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2018-03-21T06:44:15.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试题（答案）">
<meta name="twitter:description" content="前端面试题（答案）最近在招人,收集一些面试题">
  <link rel="alternate" href="/rss.xml" title="门口摔倒的老大爷" type="application/atom+xml">
  <link rel="canonical" href="https://dctxf.com/interview-questions">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome: false,
    isPost: true,
    isPage: false,
    isArchive: false
  };
</script>

  <title>前端面试题（答案） | 门口摔倒的老大爷</title>
  


  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?9ef591dac562902e43858b296afe9979";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>






  <noscript>
  <style>
  .use-motion .motion-element,
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-title { opacity: initial; }

  .use-motion .logo,
  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
  <style>
    #jinrishici-sentence{
      background-color:#fff;
      border-radius: initial;
      box-shadow: 0 2px 20px 0 rgba(0,0,0,0.06);
      min-height: auto;
      padding: 12px;
    }
  </style>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  <div class="container sidebar-position-left">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta">

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">门口摔倒的老大爷</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
  </div>

  <div class="site-nav-toggle">
    <button aria-label="Toggle navigation bar">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
      
      
      
        
        <li class="menu-item menu-item-home">
      
    
      
    

    <a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i> <br>Home</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-about">
      
    
      
    

    <a href="/about/" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i> <br>About</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-tags">
      
    
      
    

    <a href="/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i> <br>Tags<span class="badge">40</span></a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-categories">
      
    
      
    

    <a href="/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i> <br>Categories<span class="badge">5</span></a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-archives">
      
    
      
    

    <a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i> <br>Archives<span class="badge">58</span></a>

  </li>
      <li class="menu-item menu-item-search">
        <a href="javascript:;" class="popup-trigger">
        
          <i class="menu-item-icon fa fa-search fa-fw"></i> <br>Search</a>
      </li>
    
  </ul>

    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off"
             placeholder="Searching..." spellcheck="false"
             type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>


    </div>
</nav>
</div>
    </header>

    


    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="jinrishici-sentence">正在加载今日诗词....</div>
            

          <div id="content" class="content page-post-detail">
            

  <div id="posts" class="posts-expand">
    

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://dctxf.com/interview-questions.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="dctxf">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/logo.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="门口摔倒的老大爷">
    </span>
      <header class="post-header">

        
          <h2 class="post-title" itemprop="name headline">前端面试题（答案）

            
          </h2>
        

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              
                
              

              <time title="Created: 2018-03-21 14:43:21 / Modified: 14:44:15" itemprop="dateCreated datePublished" datetime="2018-03-21T14:43:21+08:00">2018-03-21</time>
            </span>
          
            

            
          

          
            
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
      </span>
        
      
      <span class="post-meta-item-text">Disqus: </span>
    
    <a title="disqus" href="/interview-questions.html#comments" itemprop="discussionUrl">
      <span class="post-comments-count disqus-comment-count" data-disqus-identifier="interview-questions.html" itemprop="commentCount"></span>
    </a>
  </span>
  
  
          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="前端面试题（答案）"><a href="#前端面试题（答案）" class="headerlink" title="前端面试题（答案）"></a>前端面试题（答案）</h1><p>最近在招人,收集一些面试题</p>
<a id="more"></a>

<h2 id="1-xhtml-和-html-有什么区别"><a href="#1-xhtml-和-html-有什么区别" class="headerlink" title="1. xhtml 和 html 有什么区别"></a>1. xhtml 和 html 有什么区别</h2><p>HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言</p>
<p>最主要的不同</p>
<ul>
<li>无序列表项 0</li>
<li>无序列表项 1XHTML 元素必须被正确地嵌套</li>
<li>XHTML 元素必须被关闭</li>
<li>标签名必须用小写字母</li>
<li>XHTML 文档必须拥有根元素</li>
</ul>
<h2 id="2-你做的页面在哪些流览器测试过-这些浏览器的内核分别是什么"><a href="#2-你做的页面在哪些流览器测试过-这些浏览器的内核分别是什么" class="headerlink" title="2. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?"></a>2. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?</h2><ul>
<li>Ie(Ie 内核)</li>
<li>火狐（Gecko）</li>
<li>谷歌（webkit）</li>
<li>opear(Presto)</li>
</ul>
<h2 id="3-标签上-title-与-alt-属性的区别是什么"><a href="#3-标签上-title-与-alt-属性的区别是什么" class="headerlink" title="3. 标签上 title 与 alt 属性的区别是什么?"></a>3. 标签上 title 与 alt 属性的区别是什么?</h2><ul>
<li><p><code>title</code>是 global attributes 之一，用于为元素提供附加的 advisory information。通常当鼠标滑动到元素上的时候显示。</p>
</li>
<li><p>alt 是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。</p>
</li>
</ul>
<h2 id="4-描述-css-reset-的作用和用途。"><a href="#4-描述-css-reset-的作用和用途。" class="headerlink" title="4. 描述 css reset 的作用和用途。"></a>4. 描述 css reset 的作用和用途。</h2><p>Reset 重置浏览器的 css 默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一</p>
<h2 id="5-清除浮动的几种方式，各自的优缺点"><a href="#5-清除浮动的几种方式，各自的优缺点" class="headerlink" title="5. 清除浮动的几种方式，各自的优缺点"></a>5. 清除浮动的几种方式，各自的优缺点</h2><ul>
<li>使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）</li>
<li>使用 overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用 zoom:1 用于兼容 IE）</li>
<li>是用 afert 伪元素清除浮动(用于非 IE 浏览器)</li>
</ul>
<h2 id="6-javascript-的-typeof-返回哪些数据类型"><a href="#6-javascript-的-typeof-返回哪些数据类型" class="headerlink" title="6. javascript 的 typeof 返回哪些数据类型"></a>6. javascript 的 typeof 返回哪些数据类型</h2><ul>
<li>Object</li>
<li>number</li>
<li>function</li>
<li>boolean</li>
<li>underfind</li>
</ul>
<h2 id="7-split-join-的区别"><a href="#7-split-join-的区别" class="headerlink" title="7. split() join() 的区别"></a>7. split() join() 的区别</h2><p>前者是切割成数组的形式，后者是将数组转换成字符串</p>
<h2 id="8-web-开发中会话跟踪的方法有哪些"><a href="#8-web-开发中会话跟踪的方法有哪些" class="headerlink" title="8. web 开发中会话跟踪的方法有哪些"></a>8. web 开发中会话跟踪的方法有哪些</h2><ul>
<li>cookie</li>
<li>session</li>
<li>url 重写</li>
<li>隐藏 input</li>
<li>ip 地址</li>
</ul>
<h2 id="9-HTML-全局属性-global-attribute-有哪些"><a href="#9-HTML-全局属性-global-attribute-有哪些" class="headerlink" title="9. HTML 全局属性(global attribute)有哪些"></a>9. HTML 全局属性(global attribute)有哪些</h2><ul>
<li>accesskey:设置快捷键，提供快速访问元素如 aaa 在 windows 下的 firefox 中按 alt + shift + a 可激活元素</li>
<li>class:为元素设置类标识，多个类名用空格分开，CSS 和 javascript 可通过 class 属性获取元素</li>
<li>contenteditable: 指定元素内容是否可编辑</li>
<li>contextmenu: 自定义鼠标右键弹出菜单内容</li>
<li>data-*: 为元素增加自定义属性</li>
<li>dir: 设置元素文本方向</li>
<li>draggable: 设置元素是否可拖拽</li>
<li>dropzone: 设置元素拖放类型： copy, move, link</li>
<li>hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果</li>
<li>id: 元素 id，文档内唯一</li>
<li>lang: 元素内容的的语言</li>
<li>spellcheck: 是否启动拼写和语法检查</li>
<li>style: 行内 css 样式</li>
<li>tabindex: 设置元素可以获得焦点，通过 tab 可以导航</li>
<li>title: 元素相关的建议信息</li>
<li>translate: 元素和子孙节点内容是否需要本地化</li>
</ul>
<h2 id="10-HTTP-method"><a href="#10-HTTP-method" class="headerlink" title="10. HTTP method"></a>10. HTTP method</h2><ul>
<li>一台服务器要与 HTTP1.1 兼容，只要为资源实现 GET 和 HEAD 方法即可</li>
<li>GET 是最常用的方法，通常用于请求服务器发送某个资源。</li>
<li>HEAD 与 GET 类似，但服务器在响应中值返回首部，不返回实体的主体部分</li>
<li>PUT 让服务器用请求的主体部分来创建一个由所请求的 URL 命名的新文档，或者，如果那个 URL 已经存在的话，就用干这个主体替代它</li>
<li>POST 起初是用来向服务器输入数据的。实际上，通常会用它来支持 HTML 的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。</li>
<li>TRACE 会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个 TRACE 响应并在响应主体中携带它收到的原始请求报文。TRACE 方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。</li>
<li>OPTIONS 方法请求 web 服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。</li>
<li>DELETE 请求服务器删除请求 URL 指定的资源</li>
</ul>
<h2 id="11-如何进行网站性能优化"><a href="#11-如何进行网站性能优化" class="headerlink" title="11. 如何进行网站性能优化"></a>11. 如何进行网站性能优化</h2><h3 id="content-方面"><a href="#content-方面" class="headerlink" title="content 方面"></a>content 方面</h3><ul>
<li>减少 HTTP 请求：合并文件、CSS 精灵、inline Image</li>
<li>减少 DNS 查询：DNS 查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS 缓存、将资源分布到恰当数量的主机名，平衡并行下载和 DNS 查询</li>
<li>避免重定向：多余的中间访问</li>
<li>使 Ajax 可缓存</li>
<li>非必须组件延迟加载</li>
<li>未来所需组件预加载</li>
<li>减少 DOM 元素数量</li>
<li>将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量</li>
<li>减少 iframe 数量</li>
<li>不要 404</li>
</ul>
<h3 id="Server-方面"><a href="#Server-方面" class="headerlink" title="Server 方面"></a>Server 方面</h3><ul>
<li>使用 CDN</li>
<li>添加 Expires 或者 Cache-Control 响应头</li>
<li>对组件使用 Gzip 压缩</li>
<li>配置 ETag</li>
<li>Flush Buffer Early</li>
<li>Ajax 使用 GET 进行请求</li>
<li>避免空 src 的 img 标签</li>
</ul>
<h3 id="Cookie-方面"><a href="#Cookie-方面" class="headerlink" title="Cookie 方面"></a>Cookie 方面</h3><ul>
<li>减小 cookie 大小</li>
<li>引入资源的域名不要包含 cookie</li>
</ul>
<h3 id="css-方面"><a href="#css-方面" class="headerlink" title="css 方面"></a>css 方面</h3><ul>
<li>将样式表放到页面顶部</li>
<li>不使用 CSS 表达式</li>
<li>使用不使用@import</li>
<li>不使用 IE 的 Filter</li>
</ul>
<h3 id="Javascript-方面"><a href="#Javascript-方面" class="headerlink" title="Javascript 方面"></a>Javascript 方面</h3><ul>
<li>将脚本放到页面底部</li>
<li>将 javascript 和 css 从外部引入</li>
<li>压缩 javascript 和 css</li>
<li>删除不需要的脚本</li>
<li>减少 DOM 访问</li>
<li>合理设计事件监听器</li>
</ul>
<h3 id="图片方面"><a href="#图片方面" class="headerlink" title="图片方面"></a>图片方面</h3><ul>
<li>优化图片：根据实际颜色需要选择色深、压缩</li>
<li>优化 css 精灵</li>
<li>不要在 HTML 中拉伸图片</li>
<li>保证 favicon.ico 小并且可缓存</li>
</ul>
<h3 id="移动方面"><a href="#移动方面" class="headerlink" title="移动方面"></a>移动方面</h3><ul>
<li>保证组件小于 25k</li>
<li>Pack Components into a Multipart Document</li>
</ul>
<h2 id="12-同源：两个文档同源需满足"><a href="#12-同源：两个文档同源需满足" class="headerlink" title="12. 同源：两个文档同源需满足"></a>12. 同源：两个文档同源需满足</h2><ul>
<li>协议相同</li>
<li>域名相同</li>
<li>端口相同</li>
</ul>
<h2 id="13-跨域通信"><a href="#13-跨域通信" class="headerlink" title="13. 跨域通信"></a>13. 跨域通信</h2><h3 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h3><p>js 进行 DOM 操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法</p>
<ul>
<li>如果是 log 之类的简单单项通信，新建<code>&lt;img&gt;</code>,<code>&lt;script&gt;</code>,<code>&lt;link&gt;</code>,<code>&lt;iframe&gt;</code>元素，通过<code>src</code>，<code>href</code>属性设置为目标 url。实现跨域请求</li>
<li>如果请求 json 数据，使用<code>&lt;script&gt;</code>进行 jsonp 请求</li>
<li>现代浏览器中多窗口通信使用 HTML5 规范的<code>targetWindow.postMessage(data, origin);</code>其中 data 是需要发送的对象，origin 是目标窗口的 origin。<code>window.addEventListener(&#39;message&#39;, handler, false);``handler</code>的<code>event.data</code>是<code>postMessage</code>发送来的数据，<code>event.origin</code>是发送窗口的<code>origin</code>，<code>event.source</code>是发送消息的窗口引用</li>
<li>内部服务器代理请求跨域 url，然后返回数据</li>
<li>跨域请求数据，现代浏览器可使用 HTML5 规范的 CORS 功能，只要目标服务器返回 HTTP 头部<strong><code>Access-Control-Allow-Origin: *</code></strong>即可像普通 ajax 一样访问跨域资源</li>
</ul>
<h2 id="14-javascript-有哪几种数据类型"><a href="#14-javascript-有哪几种数据类型" class="headerlink" title="14. javascript 有哪几种数据类型"></a>14. javascript 有哪几种数据类型</h2><h3 id="六种基本数据类型"><a href="#六种基本数据类型" class="headerlink" title="六种基本数据类型"></a>六种基本数据类型</h3><ul>
<li>undefined</li>
<li>null</li>
<li>string</li>
<li>boolean</li>
<li>number</li>
<li>symbol(ES6)</li>
</ul>
<h3 id="一种引用类型"><a href="#一种引用类型" class="headerlink" title="一种引用类型"></a>一种引用类型</h3><ul>
<li>Object</li>
</ul>
<h2 id="15-什么闭包-闭包有什么用"><a href="#15-什么闭包-闭包有什么用" class="headerlink" title="15.什么闭包,闭包有什么用"></a>15.什么闭包,闭包有什么用</h2><p>闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。</p>
<h3 id="闭包作用域链通常包括三个部分："><a href="#闭包作用域链通常包括三个部分：" class="headerlink" title="闭包作用域链通常包括三个部分："></a>闭包作用域链通常包括三个部分：</h3><ul>
<li>函数本身作用域。</li>
<li>闭包定义时的作用域。</li>
<li>全局作用域。</li>
</ul>
<h3 id="闭包常见用途："><a href="#闭包常见用途：" class="headerlink" title="闭包常见用途："></a>闭包常见用途：</h3><ul>
<li>创建特权方法用于访问控制</li>
<li>事件处理程序及回调</li>
</ul>
<h2 id="16-javascript-有哪几种方法定义函数"><a href="#16-javascript-有哪几种方法定义函数" class="headerlink" title="16.javascript 有哪几种方法定义函数"></a>16.javascript 有哪几种方法定义函数</h2><ul>
<li>函数声明表达式</li>
<li>function 操作符</li>
<li>Function 构造函数</li>
<li>ES6:arrow function</li>
</ul>
<h2 id="17-“1”-“2”-“3”-map-parseInt"><a href="#17-“1”-“2”-“3”-map-parseInt" class="headerlink" title="17. [“1”, “2”, “3”].map(parseInt)"></a>17. [“1”, “2”, “3”].map(parseInt)</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">A. [<span class="string">"1"</span>, <span class="string">"2"</span>, “<span class="number">3</span><span class="string">"]</span></span><br><span class="line"><span class="string">B. [1, 2, 3]</span></span><br><span class="line"><span class="string">C. [0, 1, 2]</span></span><br><span class="line"><span class="string">D. other</span></span><br></pre></td></tr></table></figure>

<p>你实际上得到的应该是<code>[1, NaN, NaN]</code>因为 <code>parseInt</code> 需要两个参数 <code>(val, radix)</code> 但 <code>map</code> 传了 3 个 <code>(element, index, array)</code></p>
<h2 id="18-typeof-null-null-instanceof-Object"><a href="#18-typeof-null-null-instanceof-Object" class="headerlink" title="18.[typeof null, null instanceof Object]"></a>18.[typeof null, null instanceof Object]</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">A. [<span class="string">"object"</span>, <span class="literal">false</span>]</span><br><span class="line">B. [<span class="literal">null</span>, <span class="literal">false</span>]</span><br><span class="line">C. [<span class="string">"object"</span>, <span class="literal">true</span>]</span><br><span class="line">D. other</span><br></pre></td></tr></table></figure>

<p><code>typeof</code> 对原生非可调用对象会始终返回 <code>object</code></p>
<h2 id="19-3-2-1-reduce-Math-pow-reduce-Math-pow"><a href="#19-3-2-1-reduce-Math-pow-reduce-Math-pow" class="headerlink" title="19. [ [3,2,1].reduce(Math.pow), [].reduce(Math.pow)] ]"></a>19. [ [3,2,1].reduce(Math.pow), [].reduce(Math.pow)] ]</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">A. an error</span><br><span class="line">B. [<span class="number">9</span>, <span class="number">0</span>]</span><br><span class="line">C. [<span class="number">9</span>, <span class="literal">NaN</span>]</span><br><span class="line">D. [<span class="number">9</span>, <span class="literal">undefined</span>]</span><br></pre></td></tr></table></figure>

<p>根据规范： 在一个空数组上应用<code>reduce</code>会抛初始化错误的异常 <code>TypeError</code></p>
<h2 id="20-闭包"><a href="#20-闭包" class="headerlink" title="20. 闭包"></a>20. 闭包</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">'World!'</span></span><br><span class="line">;(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> name === <span class="string">'undefined'</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> name = <span class="string">'Jack'</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'Goodbye '</span> + name)</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'Hello '</span> + name)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">A. Goodbye Jack</span><br><span class="line">B. Hello Jack</span><br><span class="line">C. Hello <span class="literal">undefined</span></span><br><span class="line">D. Hello World</span><br></pre></td></tr></table></figure>

<p><code>var</code> 声明的作用域在整个 <code>function</code> 中, 但并没有初始化</p>
<h2 id="21"><a href="#21" class="headerlink" title="21."></a>21.</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> two = <span class="number">0.2</span></span><br><span class="line"><span class="keyword">var</span> one = <span class="number">0.1</span></span><br><span class="line"><span class="keyword">var</span> eight = <span class="number">0.8</span></span><br><span class="line"><span class="keyword">var</span> six = (<span class="number">0.6</span>)[(two - one == one, eight - six == two)]</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">;[<span class="literal">true</span>, <span class="literal">true</span>][(<span class="literal">false</span>, <span class="literal">false</span>)][(<span class="literal">true</span>, <span class="literal">false</span>)]</span><br><span class="line">other</span><br></pre></td></tr></table></figure>

<p><code>JavaScript</code> 没有精确的数字, 即便它看上去有时侯能正常工作</p>
<h2 id="22-类型判断"><a href="#22-类型判断" class="headerlink" title="22. 类型判断"></a>22. 类型判断</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showCase</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">switch</span>(value) &#123;</span><br><span class="line">		<span class="keyword">case</span> <span class="string">'A'</span>:</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">'Case A'</span>);</span><br><span class="line">		<span class="keyword">break</span>;</span><br><span class="line">	<span class="keyword">case</span> <span class="string">'B'</span>:</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">'Case B'</span>);</span><br><span class="line">		<span class="keyword">break</span>;</span><br><span class="line">	<span class="keyword">case</span> <span class="literal">undefined</span>:</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">'undefined'</span>);</span><br><span class="line">		<span class="keyword">break</span>;</span><br><span class="line">	<span class="keyword">default</span>:</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">'Do not know!'</span>);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">showCase(<span class="keyword">new</span> <span class="built_in">String</span>(‘A<span class="string">'));</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">A. Case A</span><br><span class="line">B. Case B</span><br><span class="line">C. Do not know!</span><br><span class="line">D. undefined</span><br></pre></td></tr></table></figure>

<p><code>switch</code> 使用 <code>===</code> 来枚举，并且 <code>new String(x) !== x</code></p>
<h2 id="23-整数转换-进制转换"><a href="#23-整数转换-进制转换" class="headerlink" title="23. 整数转换 进制转换"></a>23. 整数转换 进制转换</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">parseInt</span>(<span class="number">3</span>, <span class="number">8</span>)</span><br><span class="line"><span class="built_in">parseInt</span>(<span class="number">3</span>, <span class="number">2</span>)</span><br><span class="line"><span class="built_in">parseInt</span>(<span class="number">3</span>, <span class="number">0</span>)</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">A. <span class="number">3</span>, <span class="number">3</span>, <span class="number">3</span></span><br><span class="line">B. <span class="number">3</span>, <span class="number">3</span>, <span class="literal">NaN</span></span><br><span class="line">C. <span class="number">3</span>, <span class="literal">NaN</span>, <span class="literal">NaN</span></span><br><span class="line">D. other</span><br></pre></td></tr></table></figure>

<p>3 在 2 进制中不存在, 很显然结果是<code>NaN</code>, 但 0 呢? <code>parseInt</code> 猜测你的意思是 10, 所有返回是 3.</p>
<h2 id="24-Array-isArray-Array-prototype"><a href="#24-Array-isArray-Array-prototype" class="headerlink" title="24. Array.isArray( Array.prototype )"></a>24. Array.isArray( Array.prototype )</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">A.true</span><br><span class="line">B.false</span><br><span class="line">C.error</span><br><span class="line">D.other</span><br></pre></td></tr></table></figure>

<p><code>Array.prototype</code> 是一个 <code>Array</code>.</p>
<h2 id="25-请将驼峰命名转为下划线命名-使用-ES6-写法"><a href="#25-请将驼峰命名转为下划线命名-使用-ES6-写法" class="headerlink" title="25. 请将驼峰命名转为下划线命名(使用 ES6 写法)"></a>25. 请将驼峰命名转为下划线命名(使用 ES6 写法)</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = ’smallDog’ =&gt; ‘small_dog’</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> str = <span class="string">'samllDog'</span></span><br><span class="line"><span class="keyword">const</span> xt2xh = <span class="function"><span class="params">str</span> =&gt;</span> &#123;</span><br><span class="line">	<span class="keyword">return</span> str.replace(<span class="regexp">/([A-Z])/</span>, ($<span class="number">1</span>, $<span class="number">2</span>) =&gt; &#123;</span><br><span class="line">		<span class="keyword">return</span> [<span class="string">'_'</span>, $<span class="number">2.</span>toLocaleLowerCase()].join(<span class="string">''</span>)</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(xt2xh(str))</span><br></pre></td></tr></table></figure>


    </div>

    
    
    
        
      

      <footer class="post-footer">

        

          <div class="post-nav">
            <div class="post-nav-next post-nav-item">
              
                <a href="/nginx-403.html" rel="next" title="Nginx无权限导致的403问题">
                  <i class="fa fa-chevron-left"></i> Nginx无权限导致的403问题
                </a>
              
            </div>

            <span class="post-nav-divider"></span>

            <div class="post-nav-prev post-nav-item">
              
                <a href="/vuex-update-but-no-refresh-the-page.html" rel="prev" title="vuex数据更新但页面没有刷新">
                  vuex数据更新但页面没有刷新 <i class="fa fa-chevron-right"></i>
                </a>
              
            </div>
          </div>
        
      </footer>
    
  </div>
  
  
  
  </article>

  </div>


          </div>
          
    
    
  <div class="comments" id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
    </div>
  </div>
  
  

        </div>
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            Overview
          </li>
        </ul>
      

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-overview">

          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image"
      src="/images/logo.png"
      alt="dctxf">
  <p class="site-author-name" itemprop="name">dctxf</p>
  <div class="site-description motion-element" itemprop="description"></div>
</div>
  <nav class="site-state motion-element">
      <div class="site-state-item site-state-posts">
        
          <a href="/archives/">
        
          <span class="site-state-item-count">58</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
    
      
      
      <div class="site-state-item site-state-categories">
        
          
            <a href="/categories/">
          
        
        
        
          
        
          
        
          
        
          
        
          
        
        <span class="site-state-item-count">5</span>
        <span class="site-state-item-name">categories</span>
        </a>
      </div>
    
      
      
      <div class="site-state-item site-state-tags">
        
          
            <a href="/tags/">
          
        
        
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
        <span class="site-state-item-count">40</span>
        <span class="site-state-item-name">tags</span>
        </a>
      </div>
    
  </nav>
  <div class="feed-link motion-element">
    <a href="/rss.xml" rel="alternate">
      <i class="fa fa-rss"></i>RSS
    </a>
  </div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="https://github.com/dctxf" title="GitHub &rarr; https://github.com/dctxf" rel="noopener" target="_blank"><i class="fa fa-fw fa-globe"></i>GitHub</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="/" title="Weibo &rarr; "><i class="fa fa-fw fa-globe"></i>Weibo</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="/dctxf" title="Twitter &rarr; dctxf"><i class="fa fa-fw fa-globe"></i>Twitter</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="/dctxf" title="FB Page &rarr; dctxf"><i class="fa fa-fw fa-globe"></i>FB Page</a>
      </span>
    
  </div>


  <div class="links-of-blogroll motion-element links-of-blogroll-block">
    <div class="links-of-blogroll-title">
      <i class="fa  fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://iwuly.com/" title="http://iwuly.com/" rel="noopener" target="_blank">iwuly</a>
        </li>
      
        <li class="links-of-blogroll-item">
          <a href="http://mybulesea.github.io/" title="http://mybulesea.github.io/" rel="noopener" target="_blank">深蓝</a>
        </li>
      
        <li class="links-of-blogroll-item">
          <a href="http://chayangge.com/" title="http://chayangge.com/" rel="noopener" target="_blank">插秧哥</a>
        </li>
      
    </ul>
  </div>

        </div>
      </div>
      <!--noindex-->
        <div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
            
            
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#前端面试题（答案）"><span class="nav-number">1.</span> <span class="nav-text">前端面试题（答案）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-xhtml-和-html-有什么区别"><span class="nav-number">1.1.</span> <span class="nav-text">1. xhtml 和 html 有什么区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-你做的页面在哪些流览器测试过-这些浏览器的内核分别是什么"><span class="nav-number">1.2.</span> <span class="nav-text">2. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-标签上-title-与-alt-属性的区别是什么"><span class="nav-number">1.3.</span> <span class="nav-text">3. 标签上 title 与 alt 属性的区别是什么?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-描述-css-reset-的作用和用途。"><span class="nav-number">1.4.</span> <span class="nav-text">4. 描述 css reset 的作用和用途。</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-清除浮动的几种方式，各自的优缺点"><span class="nav-number">1.5.</span> <span class="nav-text">5. 清除浮动的几种方式，各自的优缺点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-javascript-的-typeof-返回哪些数据类型"><span class="nav-number">1.6.</span> <span class="nav-text">6. javascript 的 typeof 返回哪些数据类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-split-join-的区别"><span class="nav-number">1.7.</span> <span class="nav-text">7. split() join() 的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-web-开发中会话跟踪的方法有哪些"><span class="nav-number">1.8.</span> <span class="nav-text">8. web 开发中会话跟踪的方法有哪些</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-HTML-全局属性-global-attribute-有哪些"><span class="nav-number">1.9.</span> <span class="nav-text">9. HTML 全局属性(global attribute)有哪些</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-HTTP-method"><span class="nav-number">1.10.</span> <span class="nav-text">10. HTTP method</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#11-如何进行网站性能优化"><span class="nav-number">1.11.</span> <span class="nav-text">11. 如何进行网站性能优化</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#content-方面"><span class="nav-number">1.11.1.</span> <span class="nav-text">content 方面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Server-方面"><span class="nav-number">1.11.2.</span> <span class="nav-text">Server 方面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Cookie-方面"><span class="nav-number">1.11.3.</span> <span class="nav-text">Cookie 方面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css-方面"><span class="nav-number">1.11.4.</span> <span class="nav-text">css 方面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Javascript-方面"><span class="nav-number">1.11.5.</span> <span class="nav-text">Javascript 方面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#图片方面"><span class="nav-number">1.11.6.</span> <span class="nav-text">图片方面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#移动方面"><span class="nav-number">1.11.7.</span> <span class="nav-text">移动方面</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#12-同源：两个文档同源需满足"><span class="nav-number">1.12.</span> <span class="nav-text">12. 同源：两个文档同源需满足</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#13-跨域通信"><span class="nav-number">1.13.</span> <span class="nav-text">13. 跨域通信</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#原因"><span class="nav-number">1.13.1.</span> <span class="nav-text">原因</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#14-javascript-有哪几种数据类型"><span class="nav-number">1.14.</span> <span class="nav-text">14. javascript 有哪几种数据类型</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#六种基本数据类型"><span class="nav-number">1.14.1.</span> <span class="nav-text">六种基本数据类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#一种引用类型"><span class="nav-number">1.14.2.</span> <span class="nav-text">一种引用类型</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#15-什么闭包-闭包有什么用"><span class="nav-number">1.15.</span> <span class="nav-text">15.什么闭包,闭包有什么用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#闭包作用域链通常包括三个部分："><span class="nav-number">1.15.1.</span> <span class="nav-text">闭包作用域链通常包括三个部分：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#闭包常见用途："><span class="nav-number">1.15.2.</span> <span class="nav-text">闭包常见用途：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#16-javascript-有哪几种方法定义函数"><span class="nav-number">1.16.</span> <span class="nav-text">16.javascript 有哪几种方法定义函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#17-“1”-“2”-“3”-map-parseInt"><span class="nav-number">1.17.</span> <span class="nav-text">17. [“1”, “2”, “3”].map(parseInt)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#18-typeof-null-null-instanceof-Object"><span class="nav-number">1.18.</span> <span class="nav-text">18.[typeof null, null instanceof Object]</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#19-3-2-1-reduce-Math-pow-reduce-Math-pow"><span class="nav-number">1.19.</span> <span class="nav-text">19. [ [3,2,1].reduce(Math.pow), [].reduce(Math.pow)] ]</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#20-闭包"><span class="nav-number">1.20.</span> <span class="nav-text">20. 闭包</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#21"><span class="nav-number">1.21.</span> <span class="nav-text">21.</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#22-类型判断"><span class="nav-number">1.22.</span> <span class="nav-text">22. 类型判断</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#23-整数转换-进制转换"><span class="nav-number">1.23.</span> <span class="nav-text">23. 整数转换 进制转换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#24-Array-isArray-Array-prototype"><span class="nav-number">1.24.</span> <span class="nav-text">24. Array.isArray( Array.prototype )</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#25-请将驼峰命名转为下划线命名-使用-ES6-写法"><span class="nav-number">1.25.</span> <span class="nav-text">25. 请将驼峰命名转为下划线命名(使用 ES6 写法)</span></a></li></ol></li></ol></div>
            

          </div>
        </div>
      <!--/noindex-->
      
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          
            <span id="scrollpercent"><span>0</span>%</span>
          
        </div>
      

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2015 – <span itemprop="copyrightYear">2019</span>
  <span class="with-love" id="animate">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">dctxf</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io" class="theme-link" rel="noopener" target="_blank">Hexo</a> v3.9.0</div>

        








        
      </div>
    </footer>

    

  </div>

  
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  <script src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

<script src="/js/utils.js?v=7.3.0"></script>
  <script src="/js/motion.js?v=7.3.0"></script>


  <script src="/js/affix.js?v=7.3.0"></script>
  <script src="/js/schemes/pisces.js?v=7.3.0"></script>



<script src="/js/next-boot.js?v=7.3.0"></script>




  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>















  <script src="/js/local-search.js?v=7.3.0"></script>














  

  

  


  
  <script src="/js/scrollspy.js?v=7.3.0"></script>
<script src="/js/post-details.js?v=7.3.0"></script>


    
<script>
  function loadCount() {
    var d = document, s = d.createElement('script');
    s.src = 'https://dctxf.disqus.com/count.js';
    s.id = 'dsq-count-scr';
    (d.head || d.body).appendChild(s);
  }
  // defer loading until the whole page loading is completed
  window.addEventListener('load', loadCount, false);
</script>
<script>
  var disqus_config = function() {
    this.page.url = "https://dctxf.com/interview-questions.html";
    this.page.identifier = "interview-questions.html";
    this.page.title = '前端面试题（答案）';};
  function loadComments() {
    if (window.DISQUS) {
      DISQUS.reset({
        reload: true,
        config: disqus_config
      });
    } else {
      var d = document, s = d.createElement('script');
      s.src = 'https://dctxf.disqus.com/embed.js';
      s.setAttribute('data-timestamp', '' + +new Date());
      (d.head || d.body).appendChild(s);
    }
  }
    $(function() {
      var offsetTop = $('#comments').offset().top - $(window).height();
      if (offsetTop <= 0) {
        // load directly when there's no a scrollbar
        window.addEventListener('load', loadComments, false);
      } else {
        $(window).on('scroll.disqus_scroll', function() {
          // offsetTop may changes because of manually resizing browser window or lazy loading images.
          var offsetTop = $('#comments').offset().top - $(window).height();
          var scrollTop = $(window).scrollTop();

          // pre-load comments a bit? (margin or anything else)
          if (offsetTop - scrollTop < 60) {
            $(window).off('.disqus_scroll');
            loadComments();
          }
        });
      }
    });
  
</script>

</body>
</html>
